@charset "utf-8";
@import "reset";
body {
  background: #f1f3f4;
  .warp {
    width: 100vw;
    height: 177.8667vw;
    margin: 0 auto;
    background-color: #eaebef;
    // 页面名称
    .title {
      width: 100vw;
      height: 13.6vw;
      background-color: white;
      display: flex;
      align-items: center;
      border-bottom: .2667vw solid #e9ecf0ff;
      .center {
        width: 17.0667vw;
        height: 10.6667vw;
        color: #555555ff;
        font-weight: 500;
        line-height: 10.6667vw;
        margin-left: 37.8vw;
      }
      .right {
        width: 7.4667vw;
        height: 10.6667vw;
        font-size: 3.7333vw;
        color: #555555ff;
        font-weight: 400;
        line-height: 10.6667vw;
        margin-left: 31.6667vw;
      }
    }
    // 修改头像
    .avatar {
      width: 100vw;
      height: 35.5787vw;
      opacity: 1;
      background-color: white;
      border-bottom: .2667vw solid #e9ecf0ff;
      .photo {
        width: 17.5333vw;
        height: 17.5333vw;
        border-radius: 8.768vw;
        opacity: 1;
        border: .2667vw solid #394d3fff;
        margin: 0 auto;
        transform: translateY(5.3333vw);
        img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }
      .write {
        width: 22.4533vw;
        height: 4.5333vw;
        opacity: 1;
        color: #555555ff;
        font-size: 3.7333vw;
        font-weight: 400;
        margin: 0 auto;
        transform: translateY(6.1333vw);
      }
    }
    // 填写信息
    .content {
      background-color: white;
      // 填写姓名
      .name {
        width: 92vw;
        height: 16.2667vw;
        line-height: 16.2667vw;
        display: flex;
        margin: 0 auto;
        border-bottom: .2667vw solid #e9ecf0ff;
        .left {
          width: 7.4667vw;
          height: 5.3333vw;
          font-size: 3.7333vw;
          color: #555555ff;
        }
        .right {
          width: 39.2533vw;
          height: 5.0667vw;
          margin-left: 12.1013vw;
          color: #000000ff;
          font-size: 3.5547vw;
        }
      }
      // 填写手机号
      .phone {
        width: 92vw;
        height: 16.2667vw;
        line-height: 16.2667vw;
        margin: 0 auto;
        display: flex;
        border-bottom: .2667vw solid #e9ecf0ff;
        .left {
          width: 7.4667vw;
          height: 5.3333vw;
          font-size: 3.7333vw;
          color: #555555ff;
        }
        .right {
          width: 39.2533vw;
          height: 5.0667vw;
          margin-left: 12.1013vw;
          color: #000000ff;
          font-size: 3.5547vw;
        }
      }
      // 填写性别
      .sex {
        width: 92vw;
        height: 16.2667vw;
        margin: 0 auto;
        display: flex;
        align-items: center;
        border-bottom: .2667vw solid #e9ecf0ff;
        .left {
          width: 7.4667vw;
          height: 5.3333vw;
          opacity: 1;
          color: #555555ff;
          font-size: 3.7333vw;
        }
        .one {
          width: 3.4667vw;
          height: 3.4667vw;
          border-radius: .6667vw;
          border: .2667vw solid #767676ff;
          margin-left: 12.1013vw;
        }
        .nan {
          width: 3.7867vw;
          height: 4.5333vw;
          opacity: 1;
          color: #555555ff;
          font-size: 3.7333vw;
          margin-left: 3.4667vw;
        }
        .two {
          width: 3.4667vw;
          height: 3.4667vw;
          border-radius: .6667vw;
          background: #0075ffff;
          margin-left: 9.1467vw;
        }
        .nv {
          width: 3.7867vw;
          height: 4.5333vw;
          opacity: 1;
          color: #555555ff;
          font-size: 3.7333vw;
          margin-left: 3.4667vw;
        }
      }
      // 填写生日
      .birthday{
        width: 92vw;
        height: 16.2667vw;
        margin: 0 auto;
        font-size: 3.7333vw;
        color: #555555ff;
        line-height: 16.2667vw;
        border-bottom: .2667vw solid #e9ecf0ff;  
      }
    }
  }
}
